<template>
    <div class="app-role">
      <h3>商品分类</h3>
     <Query
       :items="queryColumns"
       :initial-params="queryParams"
       @query="handleQuery"
       labelWidth="100px"
     />
     <Table
       :table-columns="tableColumns"
       :table-loading="tableLoading"
       :table-data="tableData"
       :total="total"
       @pagination="handlePagination"
       :tree-props="{ children: 'children', hasChildren:'hasChildren',icon:'Plus' }"
     >
       <template v-slot:tools>
         <el-button-group>
           <el-button type="primary" @click="handleAdd">添加分类</el-button>
         </el-button-group>
       </template>
       <template #img="{row}">
          <div class="classifyName_box">
            <img v-if="row.img" class="classifyName_img" :src="row.img" />
            <span v-else>-</span>
          </div>
       </template>
       <template #opt="scope">
         <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
         <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
       </template>
     </Table>
     <el-dialog v-model="showDialog" :title="dialogTitle" width="600">
        <el-form ref="refForm" :model="formData" :rules="formRules" size="default">
          <el-form-item label="分类名称" label-width="100px" required>
            <el-input v-model="formData.classifyName" :maxlength="20" show-word-limit placeholder="请输入分类名称" autocomplete="off" />
          </el-form-item>
          <el-form-item label="分类类型" label-width="100px">
            <el-radio-group v-model="formData.level">
              <el-radio :value="1">主分类</el-radio>
              <el-radio :value="2">子分类</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="父分类" label-width="100px" v-show="formData.level=='2'">
            <!-- placeholder="可多选" multiple :multiple-limit="10" -->
            <el-select clearable v-model="formData.parentId" placeholder="请选择" >
              <el-option v-for="(item,i) in allClassList" :key="'allClassitem_'+i" :label="item.classifyName" :value="item.id" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="分类图片" label-width="100px">
            <ImageUpload
              v-model="formData.img"
              :limit="1"
              listType="picture-card"
            >
            </ImageUpload>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showDialog = false" size="default">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="default">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="productTemeplate">
  import Table from "@/components/Table/index.vue";
  import Query from "@/components/Query/index.vue";
  import DialogForm from '@/components/FormDialog/index.vue'
  import { getClassifytree, saveTemplate,saveClassify } from "@/api/goods";
  const { proxy } = getCurrentInstance()
  const tableData = ref([])
  const total = ref(0)
  const tableLoading = ref(true)
  const dialogTitle = ref('')
  const loading = ref(false)
  const showDialog = ref(false)
  const refForm = ref(false)
  const router = useRouter();
  const formRules = ref({
    classifyName: [
     { required: true, message: '请输入分类名称', trigger: 'blur' },
   ],
  })
  const dialogTableVisible = ref(false)
  const prodTypeFormatter = function(row){
    const obj = {
      1: '实物商品',
      2: '虚拟商品',
    }
    return obj[row.prodType]
  }
  const formData = ref({})
  const data = reactive({
   tableColumns: [
     { label: "分类名称", prop: "classifyName",width:300},
     { label: "分类图片", prop: "img",slot: 'img' },
     { label: "系统排序", prop: "sortNum" },
     { label: "创建时间", prop: "gmtCreate" },
     { label: "操作",  prop: "opt", slot: 'opt'},
   ],
   queryColumns: [
    { label: "分类名称", prop: "classifyName", type: 'input', attrs: {placeholder:'请输入'}},
   ],
   pageParams: {
    current: 1,
    size: 10
   },
   queryParams: {},
   formItems: [
  
   ]
  })
  
  const { tableColumns, queryColumns, pageParams, queryParams, formItems } = toRefs(data)
  /** 获取列表数据 */
  const getList = () => {
    tableLoading.value = true
    const data  = {
       ...queryParams.value,
       ...pageParams.value,
       type:'1',// 1-商品分类
    }
    getClassifytree(data)
    .then(res => {
      let list = res.data.records || []
      list.map(item=>{
        item.children = item.itemList || []
      })
      console.log(11,list)
       tableData.value = list
       total.value = res.data.total
    })
    .finally(() => {
       tableLoading.value = false
    })
  }
  
  getList()
  const allClassList = ref([])
  // 获取所有商品分类
  const getAllList = () => {
    const data  = {
      current: 1,
      size: 999,
       type:'1',// 1-商品分类
    }
    getClassifytree(data)
    .then(res => {
      allClassList.value = res.data.records
    })
    .finally(() => {
       tableLoading.value = false
    })
  }
  /** 搜索按钮操作 */
  const handleQuery = (val) => {
   queryParams.value = val
   getList()
  }
  /** 打开新增弹窗 */
  const handleAdd = () => {
    dialogTitle.value = '添加分类'
    // 重置表单数据
    formData.value = {
      classifyName: '',
      level: 1,
      parentId:'',
      img:''
    }
    showDialog.value = true
    getAllList()
  }
  
  /** 打开编辑弹窗 */
  const handleEdit = (row) => {
  dialogTitle.value = '编辑分类'
   // 重置表单数据
   formData.value = {
     id: row.id,
     classifyName:row.classifyName,
      level: row.level,
      parentId:row.parentId,
      img:row.img
   }
   showDialog.value = true
   getAllList()
  }
  /** 删除按钮操作 */
  function handleDelete(row) {
   proxy.$modal.confirm('是否确认删除此数据？').then(function() {
    saveTemplate({id: row.id, delFlag: -1}).then(() => {
       getList()
       proxy.$modal.msgSuccess("删除成功")
     })
   })
  }
  const handlePagination = (val) => {
   pageParams.value = val
   getList()
  }
  const handleSubmit = async () => {
   loading.value = true
   try {
    refForm.value.validate(valid => {
      if (!valid) return
      let params = {
        ...formData.value,
        type:'1',
      }
      console.log(11,params)
      saveClassify(params).then(res=>{
        showDialog.value = false
        proxy.$modal.msgSuccess("保存成功")
        getList()
      })
     
    })
     
   } finally {
     loading.value = false
   }
  }
  </script>
  
  <style lang="scss" scoped>
  .classifyName_box{
    display: flex;
    align-items: center;
    .classifyName_img{
      width: 60px;
      height: 60px;
      object-fit: cover;
      margin-left: 8px;
    }
    span{
  
    }
  }
  .app-role {
   padding: 8px
  }
  </style>